<template>
    <div class="brand">
        <h3>品牌制造商直供</h3>
        <ul>
            <li v-for="item in brandList" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <p>{{ item.name }}</p>
                <span>{{ item.floor_price | formatMoney }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "",
    props: ["brandList"],
    data() {
        return {};
    },
};
</script>
<style lang='less' scoped>
.brand {
    h3 {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 16px;
        font-size: 20px;
        color: black;
    }

    ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
            position: relative;
            width: 49%;
            height: 127px;

            img {
                width: 100%;
                height: 117px;
                display: block;
            }

            p {
                position: absolute;
                z-index: 3;
                top: 15px;
                left: 10px;
                font-size: 16px;
                color: black;
            }

            span{
                position: absolute;
                z-index: 3;
                top: 45px;
                left: 12px;
                font-size: 16px;
                color: #8b0000;
            }
        }
    }
}
</style>